<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>录入自定义页面</title>

    <!-- 引入 css -->
    <link href="/admin/plugin/wangEditor/style.css" rel="stylesheet">
    <!-- 引入 js -->
    <script src="/admin/plugin/wangEditor/index.js"></script>

    <!--引入 element-ui 的样式，-->
    <link rel="stylesheet" href="/admin/plugin/element-ui/index.css">
    <!-- 必须先引入vue，  后使用element-ui -->
    <script type="text/javascript" src="/admin/js-css/js/vue.min.js"></script>
    <!-- 引入element 的组件库-->
    <script type="text/javascript" src="/admin/plugin/element-ui/index.js"></script>

    <script type="text/javascript" src="/admin/plugin/element-ui/httpVueLoader.js"></script>

    <!--    引入Layui组件-->
    <link rel="stylesheet" href="/admin/plugin/layui/dist/css/layui.css" tppabs="http://res.layui.com/layui/dist/css/layui.css"  media="all">
    <script src="/admin/plugin/layui/dist/layui.js" charset="utf-8"></script>

    <script type="text/javascript" src="/admin/js-css/js/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="/admin/js-css/js/mx1.0.js?v=1.1"></script>
	<link rel="stylesheet" href="/admin/js-css/css/backColor.css" media="all">
    <style type="text/css">
        .layui-table-click {
            background-color:cadetblue !important;
            color:white;
        }

        ::-webkit-scrollbar {
            width: 6px;
            height: 10px;
            background-color: rgba(255, 255, 255, 0.1);
        }

        ::-webkit-scrollbar-thumb {
            background: rgba(144, 147, 153, .3);
            border-radius: 4px;
            cursor: pointer;
        }
        .layui-form-label {
            float: left;
            display: block;
            padding: 7px 1px;
            width: 100px;
            font-weight: 400;
            line-height: 14px;
            text-align: right;
        }

        /**输入框高度设置**/
        .layui-input, .layui-select, .layui-textarea {
            height: 30px;
            line-height: 30px\9;
        }
        /**按钮样式设置**/
        .layui-btn {
            height: 30px;
            line-height: 30px;
            font-size: 13px;
        }
        .layui-btn+.layui-btn {
            margin-left: 0px;
        }

        .layui-table, .layui-table-view {
            margin: 0px 0;
        }

        .tablebox{
            margin: 0 auto;
            width: 80%;
        }
        .tablebox caption{
            margin-bottom: 10px;
            margin-top: 20px;
            font-size: 20px;
            font-weight: 700;
        }
        .tablebox td{
            height: 30px;
            padding: 5px 10px;
        }
        .title{
            width: 100px;
            text-align: right;
        }
    </style>
</head>
<body>

<script type="text/html" id="img-mktp">
    {{
    let imgs = d.mktp.split(",");
    for()
    }}

    <div><img src="{{d.mktp}}" width="30px" height="30px"/></div>
</script>

<div id="app" style="text-align: center;">

    <div class="demoTable" style="padding: 5px;">
        <div class="layui-inline" v-for="(item,index) in listSearch" style="margin: 3px 0px;">
            <label class="layui-form-label" >{{item.lable}}：</label>

            <div class="layui-input-inline" v-if="item.type == '0'" >
                <input class="layui-input"  v-model="searchInputDtos[item.key].value" :name="item.key"  autocomplete="off">
            </div>

            <div class="layui-input-inline" v-if="item.type == '1' && item.searchTypeForDateDto.startShow" >
                <input class="layui-input"   t=date v-model="searchInputDtos[item.key].searchTypeForDateDto.start" :id="item.key+'date-start'" :name="item.key"  autocomplete="off">
            </div>

            <div class="layui-input-inline" v-if="item.type == '1' && item.searchTypeForDateDto.endShow" >
                <input class="layui-input"  t=date v-model="searchInputDtos[item.key].searchTypeForDateDto.end" :id="item.key+'date-end'" :name="item.key"  autocomplete="off">
            </div>

            <div class="layui-input-inline" v-if="item.type == '5' && item.searchTypeForDateDto.startShow" >
                <input class="layui-input"  t=datetime v-model="searchInputDtos[item.key].searchTypeForDateDto.start" :id="item.key+'date-start'" :name="item.key"  autocomplete="off">
            </div>
            <div class="layui-input-inline" v-if="item.type == '5' && item.searchTypeForDateDto.endShow" >
                <input class="layui-input"   t=datetime v-model="searchInputDtos[item.key].searchTypeForDateDto.end" :id="item.key+'date-end'" :name="item.key"  autocomplete="off">
            </div>

            <div class="layui-input-inline" v-if="item.type == '6' && item.selectoptions == 0"  >
                <input class="layui-input"  v-model="searchInputDtos[item.key].value" :name="item.key"  autocomplete="off">
            </div>
            <div class="layui-input-inline" v-if="item.type == '8' && item.selectoptions == 0"  >
                <input class="layui-input"  v-model="searchInputDtos[item.key].value" :name="item.key"  autocomplete="off">
            </div>

            <div class="layui-input-inline" v-if="item.type == '6' && item.selectoptions != 0"  >
                <select :name="item.key"  v-model="searchInputDtos[item.key].value"  class="layui-input" style="display: block;width: 160px;" >
                    <option></option>
                    <option :value="vm.value" v-for="vm in item.searchTypeForSelectDtos">{{vm.showValue}}</option>
                </select>
            </div>

            <div class="layui-input-inline" v-if="item.type == '8' && item.selectoptions != 0" >
                <select :name="item.key"  v-model="searchInputDtos[item.key].value"  class="layui-input"  style="display: block;width: 160px;" >
                    <option></option>
                    <option :value="vm.value" v-for="vm in item.searchTypeForSelectDtos">{{vm.showValue}}</option>
                </select>
            </div>

        </div>

        <template v-if="JSON.stringify(listSearch) != '{}'">
            <button class="layui-btn"  onclick="vm.searchListdata()">搜索</button>
            <button class="layui-btn"  onclick="vm.f_search_advanced()">高级检索</button>
            <button class="layui-btn"  onclick="vm.f_search_custom()">自定义搜索</button>
        </template>


    </div>

    <table id="demo" lay-filter="test"></table>

    <table id="tablebox_table" class='tablebox'>

        <table border='1' class='tablebox' v-if="tableId == '624'" v-for="(map_item,index) in list_data">
            <caption>小区信息明细表</caption>
            <tr>
                <td class='title'>小区名称：</td>
                <td colspan='3'>{{ map_item.name }}</td>
            </tr>
            <tr>
                <td class='title'>小区编号：</td>
                <td colspan='3'>{{ map_item.xqbh }}</td>
            </tr>
            <tr>
                <td class='title'>小区地址：</td>
                <td colspan='3'>{{ map_item.xqdz }}</td>
            </tr>
            <tr>
                <td class='title'>开发商：</td>
                <td colspan='3'>{{ map_item.kfs }}</td>
            </tr>
            <tr>
                <td class='title'>承建商：</td>
                <td colspan='3'>{{ map_item.cjs }}</td>
            </tr>
            <tr>
                <td class='title'>使用面积：</td>
                <td>{{ map_item.zymj }}</td>
                <td class='title'>负责人：</td>
                <td>{{ map_item.fzr }}</td>
            </tr>
            <tr>
                <td class='title'>电话：</td>
                <td>{{ map_item.dh }}</td>
                <td class='title'>邮编：</td>
                <td>{{ map_item.yb }}</td>
            </tr>
            <tr>
                <td class='title'>建筑面积：</td>
                <td >{{ map_item.jzmj }}</td>
                <td class='title'>传真：</td>
                <td >{{ map_item.cz }}</td>
            </tr>
            <tr>
                <td class='title'>Email：</td>
                <td >{{ map_item.email }}</td>
                <td class='title'>开户行：</td>
                <td >{{ map_item.khh }}</td>
            </tr>
            <tr>
                <td class='title'>账号：</td>
                <td colspan='3'>{{ map_item.zh }}</td>
            </tr>
            <tr>
                <td class='title'>备注：</td>
                <td colspan='3'>{{ map_item.bz }}</td>
            </tr>
        </table>

        <table border='1' class='tablebox' v-if="tableId == '625'" v-for="(map_item,index) in list_data">
        <caption>大楼信息明细表</caption>
        <tr>
            <td class='title'>小区编码：</td>
            <td>{{ map_item.pid }}</td>
            <td class='title'>小区名称：</td>
            <td >{{ map_item.xqmc }}</td>
        </tr>
        <tr>
            <td class='title'>大楼编号：</td>
            <td >{{ map_item.bh }}</td>
            <td class='title'>大楼名称：</td>
            <td >{{ map_item.name }}</td>
        </tr>
        <tr>
            <td class='title'>使用面积：</td>
            <td>{{ map_item.zymj }}</td>
            <td class='title'>建筑面积：</td>
            <td>{{ map_item.jzmj }}</td>
        </tr>
        <tr>
            <td class='title'>竣工时间：</td>
            <td>{{ map_item.jgsj }}</td>
            <td class='title'>入伙时间：</td>
            <td>{{ map_item.rhsj }}</td>
        </tr>
        <tr>
            <td class='title'>房屋类型：</td>
            <td>{{ map_item.dh }}</td>
            <td class='title'>邮编：</td>
            <td>{{ map_item.yb }}</td>
        </tr>
        <tr>
            <td class='title'>占地面积：</td>
            <td >{{ map_item.zdmj }}</td>
            <td class='title'>房屋结构：</td>
            <td >{{ map_item.fwjg }}</td>
        </tr>
        <tr>
            <td class='title'>权属类型：</td>
            <td colspan='3'>{{ map_item.qslx }}</td>
        </tr>
        <tr>
            <td class='title'>配备设施：</td>
            <td colspan='3' >{{ map_item.ptss }}</td>
        </tr>
        <tr>
            <td class='title'>装修状况：</td>
            <td colspan='3'>{{ map_item.zxzk }}</td>
        </tr>
        <tr>
            <td class='title'>备注：</td>
            <td colspan='3'>{{ map_item.bz }}</td>
        </tr>
        </table>

        <table border='1' class='tablebox' v-if="tableId == '627'" v-for="(map_item,index) in list_data">
        <caption>房间信息明细表</caption>
        <tr>
            <td class='title'>小区编码：</td>
            <td>{{ map_item.xqid }}</td>
            <td class='title'>小区名称：</td>
            <td >{{ map_item.xqmc }}</td>
        </tr>
        <tr>
            <td class='title'>大楼编号：</td>
            <td >{{ map_item.ldid }}</td>
            <td class='title'>大楼名称：</td>
            <td >{{ map_item.ldmc }}</td>
        </tr>
        <tr>
            <td class='title'>楼层编号：</td>
            <td>{{ map_item.pid }}</td>
            <td class='title'>楼层名称：</td>
            <td>{{ map_item.dymc }}</td>
        </tr>
        <tr>
            <td class='title'>房间编号：</td>
            <td>{{ map_item.name }}</td>
            <td class='title'>房间类型：</td>
            <td>{{ map_item.fjlx }}</td>
        </tr>
        <tr>
            <td class='title'>建筑面积：</td>
            <td>{{ map_item.jzmj }}</td>
            <td class='title'>使用面积：</td>
            <td>{{ map_item.zymj }}</td>
        </tr>
        <tr>
            <td class='title'>房屋朝向：</td>
            <td >{{ map_item.fwcx }}</td>
            <td class='title'>使用状态：</td>
            <td >{{ map_item.fjzt }}</td>
        </tr>
        <tr>
            <td class='title'>权属类型：</td>
            <td >{{ map_item.qslx }}</td>
            <td class='title'>房间用途：</td>
            <td >{{ map_item.yt }}</td>
        </tr>
        <tr>
            <td class='title'>托收银行：</td>
            <td >{{ map_item.tsyh }}</td>
            <td class='title'>银行帐号：</td>
            <td >{{ map_item.zh }}</td>
        </tr>
        <tr>
            <td class='title'>交款方式：</td>
            <td colspan='3' >{{ map_item.ptss }}</td>
        </tr>
        <tr>
            <td class='title'>配备设施：</td>
            <td colspan='3'></td>
        </tr>
        <tr>
            <td class='title'>装修状况：</td>
            <td colspan='3'></td>
        </tr>
        <tr>
            <td class='title'>备注：</td>
            <td colspan='3'>{{ map_item.bz }}</td>
        </tr>
        </table>

    </table>

    <div style="padding: 10px 0px;">
        <el-button type="primary" @click="loadGengduo" size="small">加载更多</el-button>
    </div>


    <!--
    <table border='1' class='tablebox'>
        <caption>标题</caption>
        <tr>
            <td class='title'>小区编码：</td>
            <td>sss</td>
            <td class='title'>小区名称：</td>
            <td>sss</td>
        </tr>
        <tr>
            <td class='title'>小区编码：</td>
            <td>sss</td>
            <td class='title'>小区名称：</td>
            <td>sss</td>
        </tr>
        <tr>
            <td class='title'>小区编码：</td>
            <td colspan="3">sss</td>
        </tr>
    </table>
    -->
</div>


<script src="/admin/plugin/layui/dist/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 -->
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            tableId:'',
            listSearch: {},//默认查询的字段
            searchInputDtos: {},
            parmsData:{},
            list_data:[],
            pageNumber:1,
            pageCount:1
        },
        async created(){
            let mapda = getParams();
            this.tableId = mapda.tableId;
            this.parmsData = mapda;
            this.getData();
        },
        methods:{
            //开始翻页
            handleCurrentChange(val){
                console.log(val);
                this.pageNumber = val;
            },
            searchListdata(){
                this.list_data = [];
                this.pageNumber = 1;
                this.getListdata();
            },
            loadGengduo(){
                this.pageNumber++;
                if(this.pageNumber>parseInt(this.pageCount)){
                    top.alert("没有更多了");
                    return ;
                }
                this.getListdata();
            },
            async getData(){
                console.log('tableId',this.tableId);
                const res = await postBody("/admin/api/DataManagementController/getCustomFields",{tableId: getTableId(this.tableId),mapdata:top.data.treeNodeObj})
                console.log('res',res);
                this.listSearch = res.data.listSearch;
                this.searchInputDtos = res.data.listSearch;
                this.loadDateInput();
                this.getListdata();
            },
            async getListdata(){
                let i = top.load();
                const res = await postWebCustom("sichuangwuye-664",{tableId:""+getTableId(this.tableId),searchInputDtos:JSON.stringify(vm.searchInputDtos),pageNumber:""+this.pageNumber});
                top.layer.close(i);
                if(res.code == 0){
                    return;
                }
                this.list_data = [...this.list_data,...res.data.rows];
                this.pageCount = res.data.pageCount;

            },
            f_search_advanced() {
                let btn = {
                    btn: ['确定', '取消']
                    , yes: function (index, layero) {
                        //按钮【按钮一】的回调
                        let win = getTopIframe(layero);
                        let data = win.getData();
                        console.log('data',data);
                        this.searchInputDtos = data;
                        this.searchListdata();
                    }
                    , btn2: function (index, layero) {
                        //按钮【按钮二】的回调
                        //return false 开启该代码可禁止点击该按钮关闭
                    }
                };
                top.data.zygl_id = getTableId(this.tableId);
                top.f_layer_open_get("/admin/html/dataManagement/advancedRetrieval.html", "40%", "60%", function () {

                }, btn, "高级检索")
            },
            f_search_custom() {
                let btn = {
                    btn: ['关闭']
                    , btn2: function (index, layero) {
                        //按钮【按钮二】的回调
                        //return false 开启该代码可禁止点击该按钮关闭
                    }
                };
                top.data.custom = "IS_SEARCH";
                top.data.zygl_id = getTableId(this.tableId);
                top.f_layer_open_get("/admin/html/dataManagement/custom_search.html", "80%", "65%", function () {

                }, btn, "自定义搜索")
            },
            loadDateInput(){
                layui.use(['table', 'jquery', 'laydate'],function (){
                    var laydate = layui.laydate;
                    //初始化日期框
                    vm.$nextTick(function () {
                        $("[t=date]").each(function (index, element) {
                            let name = $(this).attr("name");
                            let id = $(this).attr("id");
                            let dt = "start";
                            if (id.endsWith("end")) {
                                dt = "end";
                            }
                            //日期常规用法
                            laydate.render({
                                elem: '#' + id,
                                done: function (value, date, endDate) {
                                    vm.searchInputDtos[name].searchTypeForDateDto[dt] = value;//设置vue数据对象的值
                                }
                            });
                        });

                        $("[t=datetime]").each(function (index, element) {
                            let name = $(this).attr("name");
                            let id = $(this).attr("id");
                            let dt = "start";
                            if (id.endsWith("end")) {
                                dt = "end";
                            }
                            laydate.render({
                                elem: '#' + id,
                                type: 'datetime',
                                done: function (value, date, endDate) {
                                    vm.searchInputDtos[name].searchTypeForDateDto["end"] = value;//设置vue数据对象的值
                                }
                            });
                        });
                    })
                });

            }
        },

    })

</script>

</body>
</html>
